<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>3三级页面</title>
    <link rel="stylesheet" href="dragStatic/css/modelLay.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script>
        function changePic(obj) {
            var newsrc=getObjectURL(obj.files[0]);////newsrc就是图片路径了
            $('#dragBg').attr("src",newsrc);
            changeLineColor(160,90);
        }
    </script>
    <style>
        iframe{width: 100%;height: 100%;float: left;}
    </style>
</head>
<body>
<div class="canvasMask">
    <div class="setCanvas">
        <div>画布宽：<input type="text" class="canvasWidth"/>像素</div>
        <div>画布高：<input type="text" class="canvasHeight"/>像素</div>
        <div><span class="saveCanvas">保存</span><span class="cancelCanvas">取消</span></div>
    </div>
</div>
<div class="box">
    <div class="btnNav">
        <div class="templateEdit fl">模板编辑区域</div>
        <div class="fl">宽&nbsp;&nbsp;:<span id="proWidth">&nbsp;&nbsp;0</span></div>
        <div class="fl">高&nbsp;&nbsp;:<span id="proHeight">&nbsp;&nbsp;0</span></div>
        <div class="returnBtn fl" data-flag="true">返回</div>
        <div class="setBg fr">设置画布</div>
        <script>
            // 点击设置画布按钮弹框
            $('.setBg').click(function(){$('.canvasMask').show();})
        </script>
        <div class="recoverBg fr">恢复背景图</div>
        <script>
            /////恢复背景图
//            $('.recoverBg').click(function(){$('.dragArea').css({background:'url(dragStatic/images/dragBg.png)',backgroundSize:'100% 100%'});})
            $('.recoverBg').click(function(){$('#dragBg').attr("src",'dragStatic/images/dragBg.png');changeLineColor(160,90);})
        </script>
        <div class="uploadBg fr">上传背景图
            <input id="file" class="" onchange="changePic(this)" type="file">
        </div>
        <div class="saveModule fr">保存</div>
        <div class="preview fr">预览</div>
    </div>
    <div class="dragContent clearfix">
        <div class="dragAreaBox fl">
            <div class="dragArea fl" id="color">
                <img src="dragStatic/images/dragBg.png" alt="" id="dragBg" data-adaptive-background/>
                <div class="grid">
                    <canvas id="canvas" width="1600px" height="900px"></canvas>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script src="preview/js/echarts.min.js"></script>

<script src="dragStatic/js/html2canvas.js"></script>
<!--工具包-->
<script src="dragStatic/js/common.js"></script>
<!--拖拽包-->
<script src="dragStatic/js/Tdrag.js"></script>
<!--取颜色的主色调包-->
<script src="dragStatic/js/rgbaster.min.js"></script>
<!--拖拽模块缩放大小包-->
<!--<script src="preview/js/dragScale.js"></script>-->
<script>
    $(window).resize(function() {
        rem();
    });
    $(function(){
        rem();
        var setWidth=1600,setHeight=900;///设置画布宽高的变量
        var storage=window.localStorage;
        var screenCategory=getParameter("category");
        ajaxMenuData();///页面加载渲染右面模块菜单的数据
        ajaxScreenData1();///页面加载渲染用户要编辑的版面布局（刚开始是三种情况：1是6个模块的，2是8个模块的，3是新添加的显示空白）
        changeLineColor(parseInt($('.dragArea').width()/10),parseInt($('.dragArea').height()/10));
        function ajaxScreenData(){
            $.ajax({
                type:"get",
                url:"./initScreen.json",
                dataType:"json",
                data:{},
                success:function(data){
                    console.log(data);
                    var screenArr= data,attributeArr;
                    ////找到用户要自定义的版面信息
                    for (var i = 0; i < screenArr.length; i++) {
                        if(screenArr[i].category==screenCategory){
                           attributeArr=screenArr[i].attribute;
                        }
                    }
                    /////对应的模块设置对应的left值和top值  图片存入数据库
                    for (var i = 0; i < attributeArr.length; i++) {
                      var str='<div class="dragMask" data-flag="'+attributeArr[i].name+'"><img src="dragStatic/images/closeBtn.png" alt="" class="_closeBtn fr"/></div>'+
                              '<div class="module '+attributeArr[i].class+'" data-flag="'+attributeArr[i].name+'" data-width="'+attributeArr[i].initWidth+'" data-height="'+attributeArr[i].initHeight+'" data-img="'+attributeArr[i].img+'">'+
                              '<iframe src="./'+attributeArr[i].name+'.html" id="'+attributeArr[i].name+'" frameborder="0" scrolling="no"></iframe>'+
//                              '<div class="dragBlock"></div>'+
                              '</div>';
                      $('.dragArea').append(str);
                      setCanvasSize($('.dragArea'),setWidth,setHeight,1600,900,0);////设置画布大小
                      $('.module').eq(i).css({width:attributeArr[i].width,height:attributeArr[i].height,left:attributeArr[i].left,top:attributeArr[i].top});
//                    $('.dragMask').eq(i).css({left:attributeArr[i].left/1.6/100+'rem',top:attributeArr[i].top/1.6/100+'rem',width:$('.module').eq(i).width()+15,height:$('.module').eq(i).height()});
                      $('.dragMask').eq(i).css({left:attributeArr[i].left,top:attributeArr[i].top,width:attributeArr[i].width,height:attributeArr[i].height*0.5});
                      $('.menu').each(function(j,menu){////遍历菜单按钮让出现在画布中的图标下划线出现
                          if(attributeArr[i].name==$(menu).data("flag")&&attributeArr[i].flag=="true"){
                              $(menu).find(".alreadyChoose").css({display:"block"});///对应的模块图标下划线消失
                          }
                      })
                    }
                    ////点击保存记录摆放的每个模块的信息，包括：第几屏，画布大小，背景图片，每个模块的信息：模块名字，模块摆放位置（left,top），模块图片
                    $('.saveModule').click(function(){
                        var screenObj={},attributeArr=[],finalARR=[];
                        var currCanvasWidth=$('.dragArea').width();
                        var currCanvasHeight=$('.dragArea').height();
                        ///记录只是在画布区域的模块信息
                        $('.module').each(function(i,e){
                            var attributeObj={};////每次都要清空，存储的是地址 ，循环过后所有内容都变了
                            attributeObj['name'] = $(e).data("flag");////每个模块的名称
                            attributeObj['width'] = $(e).width()/currCanvasWidth*100+"%";////每个模块的宽度
                            attributeObj['height'] = $(e).height()/currCanvasHeight*100+"%";/////每个模块的高度
                            attributeObj['left'] = $(e).position().left/currCanvasWidth*100+"%";////每个模块定位的left值
                            attributeObj['top'] = $(e).position().top/currCanvasHeight*100+"%";////每个模块定位的top值
                            attributeObj['img'] = $(e).data("img");////每个模块定位的top值
                            if($(e).position().left<$('.dragArea').width()) {
                                attributeObj['flag']="true";
                            }else{ attributeObj['flag']="false";}
                            attributeArr.push(attributeObj);
                        });
                        screenObj['index']=0;////第几屏  cutImgURL
                        screenObj['category']="default1";////版面截图
                        screenObj['attribute']=attributeArr;////所有模块的信息
                        finalARR.push(screenObj);
                        ////////将重新摆放的模块位置存储
                        /////将设置的画布信息存库
                        if(!window.localStorage){
                            alert("浏览器支持localstorage");
                            return false;
                        }else{
                            var storage=window.localStorage;/////把画布大小存入缓存
                            /////循环遍历每个模块，将每个模块的信息存库
                            storage.setItem("userInfo",JSON.stringify(finalARR));////将数组转化为字符串存储
                        }
                        alert('保存成功');
                    });
                    /////给所有的模块遮罩绑定拖拽事件，然后移动过程中在给对应的模块动态设置移动的位置
                    $('.dragMask').each(function(i,eMask) {
                        $(eMask).Tdrag({
                            scope: ".dragArea",///在指定的范围内拖动
                            cbMove: function () {
                                var maskLeft = $(eMask).position().left;
                                var maskTop = $(eMask).position().top;
                                ////设置当前被拖拽模块div和遮罩一样的位置,并且设置模块div的兄弟元素低层级，当前高层级
                                $(eMask).next().css({left: maskLeft, top: maskTop,zIndex:2}).siblings('.module').css({zIndex:1});
                                ////设置当前被拖拽遮罩高层级，其兄弟元素遮罩低层级
                                $(eMask).css({zIndex:3}).siblings('.dragMask').css({zIndex:2});
                            },
                            cbEnd: function () {
                                var maskLeft = $(eMask).position().left;
                                var maskTop = $(eMask).position().top;
                                $(eMask).next().css({left: maskLeft, top: maskTop,zIndex:2}).siblings('.module').css({zIndex:1});////设置模块盒子和遮罩一样的位置
                                $(eMask).css({zIndex:3}).siblings('.dragMask').css({zIndex:2});///设置当前拖拽的模块层级最高

                            }
                        });
                    })

                    ///点击模块上的关闭按钮，模块图片消失，
                    $('._closeBtn').click(function(){
                        var $cBtn=$(this);
                        $cBtn.parent().css({left:'100%',top:0});////遮罩消失
                        $cBtn.parent().next().css({left:'100%',top:0});////模块消失
                        $('.menu').each(function(i,e){
                            if($cBtn.parent().data("flag")==$(e).data("flag")){
                                $(e).find(".alreadyChoose").css({display:"none"});///对应的模块图标下划线消失
                            }
                        });
                    });
                    /////鼠标放到模块上下方属性值变化
                    $('.dragMask').mouseover(function(){
                        $('#proWidth').html('&nbsp;&nbsp;'+Math.floor($(this).width()));
                        $('#proHeight').html('&nbsp;&nbsp;'+Math.floor($(this).height()));
                    })
                    /////点击预览跳转新页面生成动态大屏
                    $('.preview').click(function(){
                        window.open("./newIndex.html");
                    })
                    /////当鼠标放到模块上时候再出现拖拽的小色块
                    var frameBody;
                    $('.module').mouseover(function(){
                        var idName=$(this).attr("data-flag");
                        console.log(idName);
                        frameBody=document.getElementById(''+idName+'').contentWindow.document.body;
                        $(frameBody).find('.block').show();
                    }).mouseout(function(){
                        $(frameBody).find('.block').hide();
                    })


                }
            })
        }
        function ajaxScreenData1(){
            var data;
            if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }else{
                if(storage.getItem('userInfo')){
                    data= JSON.parse(storage.getItem('userInfo'));////data是个数组
                    setWidth=storage.getItem("setWidth");/////获取宽高
                    setHeight=storage.getItem("setHeight");
                    var screenArr= data;
                    var attributeArr;
//                    var moduleArr=$('.module');
                    ////找到用户要自定义的版面信息
                    for (var i = 0; i < screenArr.length; i++) {
                        if(screenArr[i].category==screenCategory){
                            attributeArr=screenArr[i].attribute;
                        }
                    }
                    var initWH=[
                        {"class":"_title","initWidth":"960","initHeight":"70"},
                        {"class":"_time","initWidth":"320","initHeight":"96"},
                        {"class":"_weather","initWidth":"128","initHeight":"96"},
                        {"class":"_rank","initWidth":"568","initHeight":"454"},
                        {"class":"_come","initWidth":"405","initHeight":"461"},
                        {"class":"_style8","initWidth":"822","initHeight":"445"},
                        {"class":"_borrow","initWidth":"572","initHeight":"385"},
                        {"class":"_reco8","initWidth":"400","initHeight":"364"},
                        {"class":"_notice8","initWidth":"380","initHeight":"393"},
                        {"class":"_famous","initWidth":"837","initHeight":"58"},
                        {"class":"_history","initWidth":"434","initHeight":"355"},
                        {"class":"_media","initWidth":"762","initHeight":"444"},
                        {"class":"_other","initWidth":"512","initHeight":"352"}
                    ]
                    /////对应的模块设置对应的left值和top值  图片存入数据库
                    for (var i = 0; i < attributeArr.length; i++) {
                        var str='<div class="dragMask" data-flag="'+attributeArr[i].name+'"><img src="dragStatic/images/closeBtn.png" alt="" class="_closeBtn fr"/></div>'+
                                '<div class="module '+initWH[i].class+'" data-flag="'+attributeArr[i].name+'" data-width="'+initWH[i].initWidth+'" data-height="'+initWH[i].initHeight+'" data-img="'+attributeArr[i].img+'">'+
                                '<iframe src="./'+attributeArr[i].name+'.html" id="'+attributeArr[i].name+'" frameborder="0" scrolling="no"></iframe>'+
//                                    '<div class="dragBlock"></div>'+
                                '</div>';
                        $('.dragArea').append(str);
                        setCanvasSize($('.dragArea'),setWidth,setHeight,1600,900,0);////设置画布大小
                        $('.module').eq(i).css({width:attributeArr[i].width,height:attributeArr[i].height,left:attributeArr[i].left,top:attributeArr[i].top});
//                        $('.dragMask').eq(i).css({left:attributeArr[i].left/1.6/100+'rem',top:attributeArr[i].top/1.6/100+'rem',width:$('.module').eq(i).width()+15,height:$('.module').eq(i).height()});
                        $('.dragMask').eq(i).css({left:attributeArr[i].left,top:attributeArr[i].top,width:attributeArr[i].width,height:attributeArr[i].height*0.5});
                        $('.menu').each(function(j,menu){////遍历菜单按钮让出现在画布中的图标下划线出现
                            if(attributeArr[i].name==$(menu).data("flag")&&attributeArr[i].flag=="true"){
                                $(menu).find(".alreadyChoose").css({display:"block"});///对应的模块图标下划线消失
                            }
                        })
                    }
                    ////点击保存记录摆放的每个模块的信息，包括：第几屏，画布大小，背景图片，每个模块的信息：模块名字，模块摆放位置（left,top），模块图片
                    $('.saveModule').click(function(){
//                        imageData 是截图的图片base64格式、screenObj点击保存要传入的参数对象，attributeArr是存放所有模块信息的一个数组
                        var imageData,screenObj={},attributeArr=[],finalARR=[];
                        //要转换为图片的dom对象
                        var element = document.querySelector('.dragArea');
                        //要显示图片的img标签
//                        var image = document.querySelector('#img');
                        //调用html2image方法
                        function html2image(source) {
                            html2canvas(source).then(function(canvas) {
                                // obj['backgroundImg']=getBase64Image($('#dragBg')[0]);////版面的背景图转换成base64编码字符串存储数据库
                                // obj['carouselSpace']=30;////多版面轮播的间隔时间
                                imageData = canvas.toDataURL(1);/////拿到切图后的图片路径 base64格式
                                var currCanvasWidth=$('.dragArea').width();
                                var currCanvasHeight=$('.dragArea').height();
                                ///记录只是在画布区域的模块信息
                                $('.module').each(function(i,e){
                                    var attributeObj={};////每次都要清空，存储的是地址 ，循环过后所有内容都变了
//                                   if($(e).position().left<$('.dragArea').width()) {
                                    attributeObj['name'] = $(e).data("flag");////每个模块的名称
                                    attributeObj['class'] = $(e).data("class");/////每个模块的高度
                                    attributeObj['initWidth'] = $(e).data("width");////每个模块的宽度
                                    attributeObj['initHeight'] = $(e).data("height");/////每个模块的高度
                                    attributeObj['width'] = $(e).width()/currCanvasWidth*100+"%";////每个模块的宽度
                                    attributeObj['height'] = $(e).height()/currCanvasHeight*100+"%";/////每个模块的高度
                                    attributeObj['left'] = $(e).position().left/currCanvasWidth*100+"%";////每个模块定位的left值
                                    attributeObj['top'] = $(e).position().top/currCanvasHeight*100+"%";////每个模块定位的top值
                                    attributeObj['img'] = $(e).data("img");////每个模块定位的top值
//                                      obj['img']=getBase64Image($(e).find("img").first()[0]);/////每个模块的图片示意图转换成base64编码字符串存储数据库
//                                   }
                                    if(parseInt($(e).position().left)<parseInt($('.dragArea').width())) {
                                        console.log($(e).position().left,$('.dragArea').width());
                                        attributeObj['flag']="true";
                                    }else{ attributeObj['flag']="false";}
                                    attributeArr.push(attributeObj);
                                });
                                screenObj['index']=0;////第几屏  cutImgURL
                                screenObj['category']="default1";////版面截图
//                                screenObj['currCanvasWidth']=setWidth;////版面截图
//                                screenObj['currCanvasHeight']=setHeight;////版面截图
                                screenObj['attribute']=attributeArr;////所有模块的信息
                                finalARR.push(screenObj);

                                ////////将重新摆放的模块位置存储
                                /////将设置的画布信息存库
                                if(!window.localStorage){
                                    alert("浏览器支持localstorage");
                                    return false;
                                }else{
                                    var storage=window.localStorage;/////把画布大小存入缓存
                                    /////循环遍历每个模块，将每个模块的信息存库
                                    storage.setItem("userInfo",JSON.stringify(finalARR));////将数组转化为字符串存储
                                }

//                               console.log(screenObj);
                                alert('保存成功');
//                               $('body').html('<img src="'+imageData+'"/>');
                            });
                        }
                        html2image(element);

                    });
                    /////给所有的模块遮罩绑定拖拽事件，然后移动过程中在给对应的模块动态设置移动的位置
                    $('.dragMask').each(function(i,eMask) {
                        $(eMask).Tdrag({
                            scope: ".dragArea",///在指定的范围内拖动
                            cbMove: function () {
                                var maskLeft = $(eMask).position().left;
                                var maskTop = $(eMask).position().top;
                                ////设置当前被拖拽模块div和遮罩一样的位置,并且设置模块div的兄弟元素低层级，当前高层级
                                $(eMask).next().css({left: maskLeft, top: maskTop,zIndex:2}).siblings('.module').css({zIndex:1});
                                ////设置当前被拖拽遮罩高层级，其兄弟元素遮罩低层级
                                $(eMask).css({zIndex:3}).siblings('.dragMask').css({zIndex:2});
                            },
                            cbEnd: function () {
                                var maskLeft = $(eMask).position().left;
                                var maskTop = $(eMask).position().top;
                                $(eMask).next().css({left: maskLeft, top: maskTop,zIndex:2}).siblings('.module').css({zIndex:1});////设置模块盒子和遮罩一样的位置
                                $(eMask).css({zIndex:3}).siblings('.dragMask').css({zIndex:2});///设置当前拖拽的模块层级最高

                            }
                        });
                    })

                    ///点击模块上的关闭按钮，模块图片消失，
                    $('._closeBtn').click(function(){
                        var $cBtn=$(this);
                        $cBtn.parent().css({left:'100%',top:0});////遮罩消失
                        $cBtn.parent().next().css({left:'100%',top:0});////模块消失
                        $('.menu').each(function(i,e){
                            if($cBtn.parent().data("flag")==$(e).data("flag")){
                                $(e).find(".alreadyChoose").css({display:"none"});///对应的模块图标下划线消失
                            }
                        });
                    });
                    /////鼠标放到模块上下方属性值变化
                    $('.dragMask').mouseover(function(){
                        $('#proWidth').html('&nbsp;&nbsp;'+Math.floor($(this).width()));
                        $('#proHeight').html('&nbsp;&nbsp;'+Math.floor($(this).height()));
                    })
                    /////点击预览跳转新页面生成动态大屏
                    $('.preview').click(function(){
                        window.open("./newIndex.html");
                    })
                    /////当鼠标放到模块上时候再出现拖拽的小色块
                    var frameBody;
                    $('.module').mouseover(function(){
                        var idName=$(this).attr("data-flag");
                        frameBody=document.getElementById(''+idName+'').contentWindow.document.body;
                        $(frameBody).find('.block').show();
                    }).mouseout(function(){
                        $(frameBody).find('.block').hide();
                    })
                }else{
                    ajaxScreenData();
                }
            }
        }
        function ajaxMenuData(){
            $.ajax({
                type: "get",
                url: "./menu.json",
                dataType: "json",
                data: {},
                success: function (data) {
                    ////渲染菜单图标数据
                    $(data).each(function(i,e){
                        var str='<div data-flag="'+ e.attribute+'" class="menu '+ e.class+'">'+
                                '<img src="'+e.icon+'" alt=""/>'+
                                '<p>'+ e.name+'</p>'+
                                '<div class="alreadyChoose"></div>'+
                                '</div>';
                        $('.dragContent').append(str);
                    });
                    ////动态设置菜单图标样式
                    $('.dragContent>.menu').each(function(i,e){
                        if(i%2==0){//说明是偶数
                            $(e).css({right:1.5+'rem',top:i/2*0.88+'rem'})
                        }else{
                            $(e).css({right:0.1+'rem',top:(i-1)/2*0.88+'rem'})
                        }
                    });
                    ////给每个菜单图标绑定拖拽功能
                    $('.menu').each(function(i,eMenu){
//                        $(eMenu).attr('_left',$(eMenu).position().left);///给拖拽图标添加自定义属性记录拖拽前的位置
//                        $(eMenu).attr('_top',$(eMenu).position().top);
                        $(eMenu).Tdrag({
                            pos:true,////拖拽松开图标自动归位
                            cbEnd:function(){//移动结束时候的回调函数
                                var current_left=$(eMenu).position().left;////记录松开图标后的当前位置，
                                var current_top=$(eMenu).position().top;
                                var areaScrollTop=$('.dragAreaBox').scrollTop();
                                var areaScrollLeft=$('.dragAreaBox').scrollLeft();
                                console.log(areaScrollTop,areaScrollLeft);
//                                $(eMenu).css({left:$(eMenu).attr('_left')+'px',top:$(eMenu).attr('_top')+'px'});///当前拖拽的图标消失并归回原位
                                $('.dragMask').each(function(i,eModule){
                                    if( $(eMenu).data('flag')==$(eModule).data('flag')){///找到对应图标的模块图片显示并添加拖拽功能
                                        if(current_left<$('.dragArea').width()&&current_top>0){/////只有当图标拖拽到画布区域的时候才改变模块的位置
                                            $(eMenu).find(".alreadyChoose").css({display:"block"});
                                            $(eModule).css({left:current_left+areaScrollLeft,top:current_top+areaScrollTop});////设置遮罩出现在当前拖拽图标松开的位置
                                            $(eModule).next().css({left: current_left+areaScrollLeft, top: current_top+areaScrollTop});
                                        }
                                    }
                                });
                            }
                        });
                    });
                }
            });
        }
        ////点击返回跳到二级页面版面列表页
        $('.returnBtn').click(function(){
            window.location.href="./index.html?setWidth="+setWidth+"&&setHeight="+setHeight;

        })
//        设置画布大小
        $('.saveCanvas').click(function(){/////保存画布的值，把画布等比缩放 有四种情况
            if($('.canvasWidth').val()&&$('.canvasHeight').val()){////判断不为空
                setWidth=$('.canvasWidth').val();
                setHeight=$('.canvasHeight').val();
            }
            setCanvasSize($('.dragArea'),setWidth,setHeight,1600,900,0);////设置画布大小
            changeLineColor(parseInt($('.dragArea').width()/10),parseInt($('.dragArea').height()/10));////根据设定的画布尺寸重新调整小方格的列数和行数
//           让每个模块的宽高恢复1920下的固定值
            $('.module').each(function(i,e){
                if(setWidth/setHeight==16/9){
                    $(e).css({left:"100%",width:$(e).data("width")/1920*100+"%",height:$(e).data("height")/1080*100+"%"});
                    $(e).prev().css({left:"100%",width:$(e).width(),height:$(e).height()*0.8});
                }else{
                    /////当不是16比9的画布时候 ，就让动态设置模块宽高是16比9下面的固定尺寸值
                    $(e).css({left:"100%",width:$(e).data("width"),height:$(e).data("height")});
                    $(e).prev().css({left:"100%",width:$(e).data("width"),height:$(e).data("height")*0.8});

                }
            })
            /////将设置的画布信息存库
            if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }else{
                var storage=window.localStorage;/////把画布大小存入缓存
                storage.setItem("setWidth",setWidth);///画布宽
                storage.setItem("setHeight",setHeight);///画布高
            }
            $('.canvasMask').hide();
            $('.canvasWidth').val("");
            $('.canvasHeight').val("");
        })
        $('.cancelCanvas').click(function(){////取消画布消失
            $('.canvasMask').hide();
            $('.canvasWidth').val("");
            $('.canvasHeight').val("");
        })
    })
</script>

</html>